<template>
  <div>
    <el-form ref="myform" :model="formItem" :rules="rules" label-width="100px" size="mini">
      <el-form label-width="120px" size="mini" class="form-view">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="任务编号">
              {{ formItem.code }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务名称">
              {{ formItem.name }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维护部门">
              {{ formItem.orgName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="执行人">
              {{ formItem.chargeUserCode }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否停止服务">
              {{ formItem.suspendService === true ? '是' : '否' }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维护类别">
              {{ formItem.modelName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="维护规则">
              {{ formItem.ruleName }}
              <el-link v-if="formItem.ruleId" type="primary" @click="viewRule(formItem.ruleId)">（维护说明）</el-link>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维护对象">
              {{ formItem.objName }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="维护结果" prop="result">
            <el-radio v-for="(item) in result" :key="item.value" v-model="formItem.result" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护开始时间" prop="startDateTime">
            <el-date-picker
              v-model="formItem.startDateTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维护结束时间" prop="endDateTime">
            <el-date-picker
              v-model="formItem.endDateTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="停止服务通知发送状态" prop="noticeSendStatus">
            <el-radio v-for="(item) in noticeSendStatus" :key="item.value" v-model="formItem.noticeSendStatus" :label="item.value">{{ item.label }}</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参与人">
            <el-input v-model="formItem.joinUser" placeholder="请输入参与人" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话">
            <el-input v-model="formItem.tel" placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="20">
          <el-form-item label="结果描述">
            <el-input v-model="formItem.resultDesc" placeholder="请输入结果描述" type="textarea" :rows="3" :autosize="true" resize="none" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="20">
          <el-form-item label="维护过程说明">
            <el-input v-model="formItem.processDesc" placeholder="请输入维护过程说明" type="textarea" :rows="3" :autosize="true" resize="none" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="20">
          <el-form-item label="备注">
            <el-input v-model="formItem.remarks" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <ViewDialog v-if="dialogViewRuleVisible" class="fixed-dialog-height" title="维护说明" :append-to-body="true" :show.sync="dialogViewRuleVisible" width="90%" @on-cancel="viewCancel">
      <ViewRuleForm :id="ruleId" ref="ViewRuleForm" />
    </ViewDialog>
  </div>
</template>

<script>
import ViewDialog from '@neu/biz-core/components/ViewDialog'
import ViewRuleForm from './viewRuleForm'
import { formatDate } from '@neu/biz-core/utils/utils'
import {
  update,
  detail
} from '@neu/dcom-ui/api/maintainTask'

// 定义一个表单原始项
const formItem = {
  name: '',
  code: '',
  orgCode: null,
  orgName: '',
  chargeUserId: '',
  chargeUserCode: '',
  chargeUserName: '',
  suspendService: '',
  modelCode: null,
  modelName: '',
  objCode: '',
  objName: '',
  ruleId: '',
  ruleCode: '',
  ruleName: '',
  status: 'undo',
  result: 'normal',
  startDateTime: '',
  endDateTime: '',
  noticeSendStatus: 'send',
  joinUser: '',
  tel: '',
  resultDesc: '',
  processDesc: '',
  remarks: ''
}
export default {
  name: 'TmpMaintainTaskEditForm',
  components: {
    ViewDialog,
    ViewRuleForm
  },
  props: {
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      /** 启用状态 */
      status: [],
      /** 结果状态 */
      result: [],
      /** 停止服务通知发送状态 */
      noticeSendStatus: [],
      // 运维规则
      maintainRuleList: [],
      /** 要移除的对象 */
      removeData: [],
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      // 表单验证规则
      rules: {
        noticeSendStatus: [{
          required: true,
          message: '停止服务通知发送状态不能为空',
          trigger: 'blur'
        }],
        startDateTime: [{
          required: true,
          message: '开始时间不能为空',
          trigger: 'blur'
        }],
        endDateTime: [{
          required: true,
          message: '结束时间不能为空',
          trigger: 'blur'
        }],
        result: [{
          required: true,
          message: '维护结果不能为空',
          trigger: 'blur'
        }]
      },
      dialogViewRuleVisible: false,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      ruleId: -1
    }
  },
  watch: {
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
    this.noticeSendStatus = [{ value: 'send', label: '已发送' }, { value: 'unsend', label: '未发送' }]
    this.result = [{ value: 'normal', label: '正常' }, { value: 'abnormal', label: '异常' }]
  },
  methods: {
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          this.formItem = {
            ...response.data
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    },
    save(value) {
      const updated = this.id !== -1

      this.formItem.status = value
      return new Promise(resolve => {
        this.$refs.myform.validate((valid) => {
          if (valid) {
            if (formatDate(this.formItem.startDateTime) > formatDate(this.formItem.endDateTime)) {
              return this.$message({
                showClose: true,
                message: '任务开始时间不能大于任务结束时间',
                type: 'error'
              })
            }

            if (this.formItem.tel !== null && /^1[3|4|5|7|8][0-9]{9}$/.test(this.formItem.tel) === false) {
              return this.$message({
                showClose: true,
                message: '电话号码不正确',
                type: 'error'
              })
            }

            if (this.formItem.remarks !== null && this.formItem.remarks.length > 255) {
              return this.$message({
                showClose: true,
                message: '备注信息不能超过255个字符',
                type: 'error'
              })
            }

            if (this.formItem.joinUser !== null && this.formItem.joinUser.length > 255) {
              return this.$message({
                showClose: true,
                message: '参与人信息不能超过255个字符',
                type: 'error'
              })
            }

            if (updated) {
              resolve(update(this.id, this.formItem))
            }
          } else {
            resolve(false)
          }
        })
      })
    },
    reset() {
      this.$refs.myform.resetFields()
      this.formItem = { ...formItem }
    },
    viewRule(id) {
      this.ruleId = id

      if (this.ruleId === -1 || this.ruleId === null || this.ruleId === 0) {
        return this.$message({
          showClose: true,
          message: '当前任务没有匹配维护规则',
          type: 'warning'
        })
      }

      this.dialogViewRuleVisible = true
    },
    viewCancel() {
      this.ruleId = -1
      this.dialogViewRuleVisible = false
    }
  }

}
</script>
